
<template>
  <div class="voice">
    <aplayer id="aplayer" ref="aplayer" autoplay :music="voiceUpload.music" />
  </div>
</template>

<script>
import Aplayer from 'vue-aplayer'
Aplayer.disableVersionBadge = true
export default {
  components: { Aplayer },
  props: {
    title: {
      type: String,
      default: '.'
    },
    artist: {
      type: String,
      default: '.'
    },
    src: {
      type: String,
      default: ''
    },
    pic: {
      type: String,
      default: 'none'
    },
    lrc: {
      type: String,
      default: 'none'
    },
    state: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      voiceUpload: {
        music: {
          title: this.title,
          artist: this.artist,
          src: this.src,
          pic: '',
          lrc: ''
        }
      }
    }
  },
  watch: {
    // 更改视频源 videoUrl从弹出框组件传值
    src: function(val) {
      const audios = document.getElementById('aplayer').querySelector('audio')
      if (val !== '') {
        audios.load()
        audios.play()
      }
    },
    // 弹出框关闭后暂停 否则一直在播放 state从弹出框组件传值
    state: function(val) {
      const audios = document.getElementById('aplayer').querySelector('audio')
      if (!val) {
        audios.pause()
      }
    }
  },
  methods: {
    // 监听播放
    onAudioPlay(player) {},
    // 监听暂停
    onAudioPause(player) {}
  }
}
</script>
